<template>
	<view class="box_flex">
		<view class="">
				<image class="img_logo" src="../../static/order/log.jpg" mode="widthFix"></image>
		</view>
		<view class="from_box">
			<u--form
				labelPosition="left"
				ref="uForm"
			>
				<u-form-item
					prop="name"
					borderBottom
					ref="item1"
				>
				 <view class="userInfro_flex" style="position: relative;">
					 <view class="ico_right_10">
						 <u-icon name="phone" color="#2979ff" size="28"></u-icon>
					 </view>
					 <u--input
					  :key="keys"
						v-model="userInfo.name"
					  @focus="focusFun"
						@change="blurFun"
						maxlength="11"
						type="text"
						border="none"
						placeholder="请输入账号"
					 ></u--input>
					 <view class="userBox" v-show="useShow" v-if="indexList.length">
							<u-list>
								<u-list-item
									v-for="(item, index) in indexList"
									:key="index"
									
								>
									<u-cell
										@click="userFun(item)"
										link
										:title="item.name"
									>
									</u-cell>
								</u-list-item>
							</u-list>
					 </view>
				 </view>
				</u-form-item>
				<u-form-item
					prop="password"
					borderBottom
					ref="item1"
				>
				 <view class="userInfro_flex">
					 <view class="ico_right_10">
							<u-icon name="lock" color="#2979ff" size="28"></u-icon>
					 </view>
					 <u--input
					 v-if="passwordShow"
					 	:type="'text'"
					 	v-model="userInfo.password"
					 	placeholder="请输入密码"
					 	border="none"
					 >
					 	<!-- <view slot="suffix">
					 		
					 	</view> -->
					 </u--input>
						<u--input
						 v-if="!passwordShow"
							:type="'password'"
							v-model="userInfo.password"
							placeholder="请输入密码"
							border="none"
						>
							<!-- <view slot="suffix">
								
							</view> -->
						</u--input>
						<view @click="passwordShowFun">
							<u-icon v-if="passwordShow"   name="eye-fill" color="#2979ff"></u-icon>
							<u-icon v-if="!passwordShow"  name="eye-off" color="#2979ff"></u-icon>
						</view>
						
				 </view>
				</u-form-item>
			</u--form>
		</view>
		
		<view class="login_top_100">
			<u-button @click="logFun" type="primary" :loading="loading" loadingText="登录中">{{ loading? '登录中' : '登录' }}</u-button>
		</view>
		
		<view class="font_color">
			<span>没有账号? </span>
			<span style="color:#2979ff;" @click="registerFun">立即注册</span>
		</view>
	<!-- 	<view class="footer_botton_10">
			其他登录方式
		</view>
		<view class="flex_footer">
			<u-icon name="weixin-fill" color="rgb(4, 208, 27)" size="28"></u-icon>
			<view style="margin-left: 100rpx;border-radius: 10rpx;overflow: hidden;" >
				<u-button type="warning" size="mini">短信验证码</u-button>
			</view>
			
		</view> -->
		<view class="proto_box" v-if="protoIshow">
			<view class="proto_pad">
				<view class="" style="text-align: center;font-weight: bold;color: #111;">
					用户协议和隐私条款
				</view>
				<view class="font_size" style="margin-top: 40rpx;">
					欢迎您使用沙棠花小程序
				</view>
				<view class="font_size">
					请您仔细阅读<span style="color: #2979ff" @click="userAgreement">《用户协议》</span>和<span style="color: #2979ff" @click="privacyPolicy">《隐私政策》</span>,如您同意全部内容,请点击“同意”开始使用我们的服务。				
				</view>
				<view  @click="isfalseFun" class="but_b" style="font-weight: 700;">
					同意并继续
				</view>
				<view  @click="gotoback" class="but_t">
					不同意
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { login, getCodeImg, getLoginCustomerInfo, getbyuser, medicalRepresentative } from "@/api/login/index.js"
	import { encrypt } from '@/utils/jsencrypt'
	export default {
		data() {
			return {
				keys: '',
				useShow: false,
				indexList: [],
				provi: false,
				protoIshow: true,
				uuid: '',
				passwordShow: false,
				loading: false,
				userInfo: {
					name: '',
					password: '',
				},
				// rules: {
				// 	'name': {
				// 		type: 'string',
				// 		required: true,
				// 		message: '请填写账号',
				// 		trigger: ['blur', 'change']
				// 	},
				// 	'password': [{
				// 		type: 'string',
				// 		required: false,
				// 		message: '请填写密码',
				// 		trigger: ['blur']
				// 	}],
				// },
			}
		},
		mounted() {
			if (uni.getStorageSync('setStorageUserList')) {
				this.indexList = uni.getStorageSync('setStorageUserList')
			}
			// this.getCodeImg()
			if (uni.getStorageSync('protoIshowType')) {
				this.protoIshow = false
			}
			uni.removeStorageSync("protoIshowType");
			uni.removeStorageSync("token");
			uni.removeStorageSync("userInfoRole");
			uni.removeStorageSync("userInfo");
		},
		methods: {
			blurFun() {
				this.useShow = false
			},
			focusFun() {
				this.useShow = true
			},
			userFun(val) {
				console.log('fasdg4235', val)
				this.userInfo.name = val.name
				this.userInfo.password = val.value
				// this.$refs.uForm.validateField('userInfo.password')
				this.useShow = false
			},
			userAgreement() {
				uni.navigateTo({
					url: '/pages/protocol/userAgreement/index'
				})
			},
			privacyPolicy() {
				uni.navigateTo({
					url: '/pages/protocol/privacyPolicy/index'
				})
			},
			isfalseFun() {
				this.protoIshow = false
				this.provi = false
			},
			gotoback() {
				this.protoIshow = false
				this.provi = true
			},
			getCodeImg() {
				getCodeImg().then((res) => {
					// this.uuid = res.uuid??'';
				})
			},
			passwordShowFun() {
				this.passwordShow = !this.passwordShow
			},
			logFun() {
				if (this.provi) {
					this.protoIshow = true
					return
				}
				if (!this.userInfo.name || !this.userInfo.password) {
					uni.$u.toast('请输入账号和密码')
					return
				}
				// this.$refs.uForm.validate().then(res => {
					this.loading = true
					// uni.switchTab({
					// 	url: "/pages/index/index"
					// }) { username, password, code, uuid }
					
					
					login({
						username: this.userInfo.name,
						password: encrypt(this.userInfo.password),
					}).then((res) => {
						// uni.getStorageSync('token')
						uni.setStorage({
							key: 'protoIshowType',
							data: true,
						})
						if (this.indexList.filter(item => item.name == this.userInfo.name).length == 0) {
							this.indexList.push({
								name: this.userInfo.name,
								value: this.userInfo.password
							})
							uni.setStorage({
								 key: 'setStorageUserList',
								 data: this.indexList
							});
						}
						uni.setStorage({
							key: 'token',
							data: res.data.access_token,
							success: () => {
								getLoginCustomerInfo().then((datas) => {
									((datas.data.sysUser.userType == '02')? medicalRepresentative : getbyuser)(datas.data.sysUser.userId).then((resmin) => {
										uni.setStorage({
											key: 'userInfoRole',
											data: JSON.stringify(resmin.data)
										})
									})
									uni.setStorage({
										key: 'userInfo',
										data: JSON.stringify(datas.data.sysUser)
									})
									// 02: 代表
									// 01:代理商
									
									// medicalRepresentative
									uni.switchTab({
										url: "/pages/index/index"
									})
								})
							}
						})
					}).catch(() => {
						this.loading = false
					})
				// }).catch(errors => {
				// 	uni.$u.toast('校验失败')
				// })
			},
			registerFun() {
				// uni.navigateTo({
				// 	url: "/pages/register/index"
				// })
				uni.setStorage({
					key: 'protoIshowType',
					data: true,
				})
				uni.navigateTo({
					url: "/pages/register/registrationType/index"
				})
				
			},
		},
		options: { styleIsolation: 'shared' }
	}
</script>

<style lang="scss" scoped>
.box_flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30%;
	box-sizing: border-box;
	// background-color: $back-color;
	.img_logo {
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 20rpx;
	}
	.userInfro_flex {
		display: flex;
		width: 100%;
	}
	.ico_right_10 {
		margin-right: 30rpx;
	}
	.login_top_100 {
		margin-top: 20%;
		border-radius: 100rpx;
		width: 500rpx;
		overflow: hidden;
	}
	.font_color {
		font-size: 25rpx;
		margin-top: 20rpx;
		color: gray;
	}
	.flex_footer {
		display: flex;
	}
	.footer_botton_10 {
		margin-top: 20%;
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}
	.from_box {
		width: 100%;
		padding: 0 80rpx;
		box-sizing: border-box;
	}
}
.proto_box {
		background-color: rgba(0,0,0, .7);
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: absolute;
		z-index: 99999;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.proto_pad {
		width: 600rpx;
		height: 500rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.but_b, .but_t {
		width: 500rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: auto;
		background-color: rgb(3, 121, 255);
		text-align: center;
		margin-top: 20rpx;
		border-radius: 50rpx;
		color: #fff;
	}
	.but_t {
		background-color: #fff;
		color: #111;
	}
	.font_size {
		font-size: 30rpx;
		color: #111;
		line-height: 44rpx;
	}
	.userBox {
		width: 100%;
		// border: 1px solid red;
		position: absolute;
		background-color: #fff;
		top: 75rpx;
		z-index: 999;
		padding-left: 50rpx;
	}
</style>
